<template>
  <div class="posts-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>帖子管理</span>
          <div class="search-box">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索帖子标题或内容"
              prefix-icon="Search"
              clearable
              @clear="handleSearch"
              @keyup.enter="handleSearch"
            />
            <el-button type="primary" @click="handleSearch">搜索</el-button>
          </div>
        </div>
      </template>

      <!-- 帖子列表 -->
      <el-table
        :data="postList"
        style="width: 100%"
        v-loading="loading"
        border
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="标题" min-width="200">
          <template #default="scope">
            <el-tooltip :content="scope.row.title" placement="top" :show-after="1000">
              <span class="truncate-text">{{ scope.row.title }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="author" label="作者" width="120" />
        <el-table-column prop="createTime" label="发布时间" width="150" />
        <el-table-column prop="viewCount" label="浏览量" width="100" />
        <el-table-column prop="commentCount" label="评论数" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '已发布' ? 'success' : 'warning'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" size="small" @click="viewPost(scope.row)">查看</el-button>
            <el-popconfirm
              title="确定要删除这条帖子吗?"
              @confirm="deletePostHandler(scope.row)"
            >
              <template #reference>
                <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 帖子详情对话框 -->
    <el-dialog v-model="dialogVisible" title="帖子详情" width="70%">
      <div v-if="currentPost" class="post-detail">
        <h2>{{ currentPost.title }}</h2>
        <div class="post-meta">
          <span>作者: {{ currentPost.author }}</span>
          <span>发布时间: {{ currentPost.createTime }}</span>
          <span>浏览量: {{ currentPost.viewCount }}</span>
          <span>评论数: {{ currentPost.commentCount }}</span>
        </div>
        <div class="post-content" v-html="currentPost.content"></div>
      </div>
    </el-dialog>
  </div>
</template>

<!--<script setup>-->
<!--import { ref, onMounted } from 'vue'-->
<!--import { ElMessage, ElMessageBox } from 'element-plus'-->
<!--import { getPosts, deletePost as removePost } from '@/api'-->

<!--// 表格数据-->
<!--const loading = ref(false)-->
<!--const postList = ref([])-->
<!--const total = ref(0)-->
<!--const currentPage = ref(1)-->
<!--const pageSize = ref(10)-->
<!--const searchKeyword = ref('')-->

<!--// 详情对话框-->
<!--const dialogVisible = ref(false)-->
<!--const currentPost = ref(null)-->

<!--// 加载帖子列表-->
<!--const loadPostList = async () => {-->
<!--  loading.value = true-->
<!--  try {-->
<!--    // 调用API获取帖子列表-->
<!--    const res = await getPosts({-->
<!--      page: currentPage.value,-->
<!--      pageSize: pageSize.value,-->
<!--      keyword: searchKeyword.value-->
<!--    })-->
<!--    -->
<!--    // 如果后端有真实数据，替换下面的模拟数据-->
<!--    if (res && res.data) {-->
<!--      postList.value = res.data.list || []-->
<!--      total.value = res.data.total || 0-->
<!--    } else {-->
<!--      // 模拟数据，后端接口完成后可以删除-->
<!--      const mockData = []-->
<!--      for (let i = 1; i <= pageSize.value; i++) {-->
<!--        const id = (currentPage.value - 1) * pageSize.value + i-->
<!--        mockData.push({-->
<!--          id,-->
<!--          title: `帖子标题 ${id} - ${searchKeyword.value ? `包含"${searchKeyword.value}"的` : ''}示例帖子`,-->
<!--          author: `用户${Math.floor(Math.random() * 100)}`,-->
<!--          createTime: new Date().toLocaleDateString(),-->
<!--          viewCount: Math.floor(Math.random() * 1000),-->
<!--          commentCount: Math.floor(Math.random() * 50),-->
<!--          status: Math.random() > 0.2 ? '已发布' : '待审核',-->
<!--          content: `<p>这是帖子 ${id} 的详细内容。这是一段示例文字，用于展示帖子的详情对话框。</p>-->
<!--                    <p>这里可以包含各种格式的文本内容，包括段落、列表、图片等。</p>`-->
<!--        })-->
<!--      }-->
<!--      postList.value = mockData-->
<!--      total.value = 100 // 假设总数为100-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error('加载帖子列表失败:', error)-->
<!--  } finally {-->
<!--    loading.value = false-->
<!--  }-->
<!--}-->

<!--// 首次加载-->
<!--onMounted(() => {-->
<!--  loadPostList()-->
<!--})-->

<!--// 处理页码变化-->
<!--const handleCurrentChange = (val) => {-->
<!--  currentPage.value = val-->
<!--  loadPostList()-->
<!--}-->

<!--// 处理每页条数变化-->
<!--const handleSizeChange = (val) => {-->
<!--  pageSize.value = val-->
<!--  currentPage.value = 1-->
<!--  loadPostList()-->
<!--}-->

<!--// 搜索-->
<!--const handleSearch = () => {-->
<!--  currentPage.value = 1-->
<!--  loadPostList()-->
<!--}-->

<!--// 查看帖子详情-->
<!--const viewPost = (post) => {-->
<!--  currentPost.value = post-->
<!--  dialogVisible.value = true-->
<!--}-->

<!--// 删除帖子-->
<!--const deletePostHandler = async (post) => {-->
<!--  try {-->
<!--    // 调用API删除帖子-->
<!--    await removePost(post.id)-->
<!--    -->
<!--    // 从列表中移除-->
<!--    postList.value = postList.value.filter(item => item.id !== post.id)-->
<!--    ElMessage.success('删除成功')-->
<!--    -->
<!--    // 如果当前页没有数据了，回到上一页-->
<!--    if (postList.value.length === 0 && currentPage.value > 1) {-->
<!--      currentPage.value&#45;&#45;-->
<!--      loadPostList()-->
<!--    }-->
<!--  } catch (error) {-->
<!--    console.error('删除帖子失败:', error)-->
<!--    // 错误已在request.js中的拦截器处理-->
<!--  }-->
<!--}-->
<!--</script>-->

<style scoped>
.posts-container {
  padding: 0 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-box {
  display: flex;
  gap: 10px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 350px;
}

.post-detail {
  padding: 0 20px;
}

.post-meta {
  margin: 15px 0;
  display: flex;
  gap: 20px;
  color: #606266;
  font-size: 14px;
}

.post-content {
  margin-top: 20px;
  line-height: 1.6;
}
</style> 